<template>
  <el-dialog
    title="无线回传设置"
    :visible.sync="dialogVisible"
    width="800px"
    class="wifi-trans"
  >
    <ul>
      <li class="set-group">
        <div class="left-checkbox">
          <el-switch
            v-model="form.clock"
            active-color="#46AFFF"
            active-value="100"
            inactive-value="0"
          >
          </el-switch>
          闹钟模式
        </div>
        <div class="right-select">
          <div>
            <el-checkbox v-model="form.firstClock">第一组</el-checkbox
            ><el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </div>
          <div>
            <el-checkbox v-model="form.firstClock">第二组</el-checkbox
            ><el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </div>
          <div>
            <el-checkbox v-model="form.firstClock">第三组</el-checkbox
            ><el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </div>
          <div>
            <el-checkbox v-model="form.firstClock">第四组</el-checkbox
            ><el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </div>
          <div>
            <el-checkbox v-model="form.firstClock">第五组</el-checkbox
            ><el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </div>
          <div>
            <el-checkbox v-model="form.firstClock">第六组</el-checkbox
            ><el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </div>
        </div>
      </li>
      <li class="set-group">
        <div class="left-checkbox">
          <el-switch
            v-model="form.clock"
            active-color="#46AFFF"
            active-value="100"
            inactive-value="0"
          >
          </el-switch>
          定时模式
        </div>
        <div class="right-select">
          <div class="only-one-line">
            <el-input
              v-model="form.locktime"
              placeholder=""
              size="mini"
            ></el-input
            ><span>范围000-999分，设置000时表示关闭</span>
          </div>
        </div>
      </li>
      <li class="set-group">
        <div class="left-checkbox">
          <el-switch
            v-model="form.clock"
            active-color="#46AFFF"
            active-value="100"
            inactive-value="0"
          >
          </el-switch>
          星期模式
        </div>
        <div class="right-select">
          <el-checkbox v-model="form.time1">星期一</el-checkbox>
          <el-checkbox v-model="form.time2">星期二</el-checkbox>
          <el-checkbox v-model="form.time3">星期三</el-checkbox>
          <el-checkbox v-model="form.time4">星期四</el-checkbox>
          <el-checkbox v-model="form.time5">星期五</el-checkbox>
          <el-checkbox v-model="form.time6">星期六</el-checkbox>
          <el-checkbox v-model="form.time7">星期日</el-checkbox>
          <label>
            <el-time-select
              v-model="form.firstTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }"
              class="small-select"
              size="mini"
              placeholder="任意时间点"
            >
            </el-time-select>
          </label>
        </div>
      </li>
    </ul>
    <div style="color: red;">
      优先级：定时模式>星期模式>闹钟模式,若设置多个模式，按优先级生效第一个
    </div>
    <el-checkbox v-model="checked">对该车组下的所有车组进行设置</el-checkbox>
    <span slot="footer" class="dialog-footer" style="text-align: center;">
      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
      <el-button type="primary" @click="dialogVisible = false" size="mini"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checked: false,
      form: {
        clock: false,
        firstTime: '00:00'
      }
    };
  },

  methods: {
    show() {
      this.dialogVisible = !this.dialogVisible;
    }
  }
};
</script>

<style lang="scss">
.wifi-trans {
  .el-dialog__header {
    background-color: #479de6 !important;

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 10px;
  }

  .el-dialog__footer {
    text-align: center;
  }

  .small-select {
    display: inline-block;
    width: 100px;
    margin-right: 10px;
  }

  .set-group {
    display: flex;
    margin-bottom: 20px;

    .left-checkbox {
      flex: 0 0 20%;
    }

    .right-select {
      flex: 0 0 80%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      > div {
        flex: 0 0 30%;
        margin-bottom: 10px;
        .el-checkbox {
          margin-right: 5px;
        }
      }

      .only-one-line {
        flex: 0 0 100%;

        .el-input {
          display: inline-block;
          width: 220px;
          margin-right: 10px;
        }
      }

      label {
        flex: 0 0 20%;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
